<div class="tuleap-modal-loading" ng-if="kanban.loading_modal.loading"></div>
<socket-disconnect></socket-disconnect>
<div id="kanban-header">
    <h1>{{ kanban.kanban.label }}</h1>

    <button type="button" class="btn btn-small" ng-click="kanban.editKanban()" ng-show="kanban.showEditbutton()">
        <i class="icon-edit"></i>
        <span translate>Edit this Kanban</span>
    </button>

    <button type="button" class="btn btn-small" ng-click="kanban.openReportModal()">
        <i class="icon-bar-chart"></i>
        <span translate>Show reports</span>
    </button>

    <div class="btn-group view-switcher" data-toggle="buttons-radio">
        <button
            type="button"
            class="btn btn-small"
            ng-class="{active: kanban.user_prefers_collapsed_cards}"
            ng-click="kanban.toggleCollapsedMode()"
            title="{{ 'Compact view' | translate }}">
            <i class="icon-list"></i> <span translate>Compact view</span>
        </button>
        <button
            type="button"
            class="btn btn-small"
            ng-class="{active: ! kanban.user_prefers_collapsed_cards}"
            ng-click="kanban.toggleCollapsedMode()"
            title="{{ 'Detailed view' | translate }}">
            <i class="icon-th-list"></i> <span translate>Detailed view</span>
        </button>
    </div>

    <div class="input-search">
        <input
            type="search"
            class="search"
            placeholder="{{ 'Filter...' | translate }}"
            ng-model="kanban.filter.terms"
            ng-keyup="kanban.filterCards()"
        >
    </div>

    <div class="clearfix"></div>
</div>

<div id="kanban-board" resize>
    <div class="backlog column"
        ng-class="{'column-displayed': kanban.backlog.is_open, 'column-hidden': ! kanban.backlog.is_open, 'small_column': kanban.backlog.is_small_width}"
        ng-click="kanban.expandBacklog()"
        ng-attr-title="{{ kanban.backlog.is_open ? '' : 'Toggle the backlog' | translate }}"
        ng-style="{width: kanban.backlog.resize_width}"
    >
        <div class="column-header" class="backlog"
            ng-style="{width: kanban.backlog.resize_width}"
        >
            <span
                ng-if="kanban.backlog.loading_items || kanban.backlog.fully_loaded"
                class="wip-count"
                ng-class="{ loading: kanban.backlog.loading_items }"
            >{{ kanban.backlog.content.length }}</span>
            <span
                ng-if="! kanban.backlog.loading_items && ! kanban.backlog.fully_loaded"
                class="wip-count"
            >{{ kanban.backlog.nb_items_at_kanban_init }}</span>
            <span class="toggle-column"
                title="{{ 'Toggle the backlog' | translate }}"
                ng-click="kanban.toggleBacklog(); $event.stopPropagation();"
            >
                <i class="icon-inbox"></i>
            </span>
            <span class="column-label">{{ kanban.backlog.label }}</span>
        </div>
        <kanban-column
            ng-init="$ctrl.column=kanban.backlog"
        ></kanban-column>
        <add-in-place column="kanban.backlog" create-item="kanban.createItemInPlaceInBacklog" ng-if="kanban.backlog.user_can_add_in_place && kanban.backlog.is_open"></add-in-place>
        <div class="column-label">
            <div ng-style="{top: kanban.backlog.resize_top, left: kanban.backlog.resize_left}">
                {{ kanban.backlog.label }}
                <span
                    ng-if="kanban.backlog.loading_items || kanban.backlog.fully_loaded"
                    class="count"
                    ng-class="{ loading: kanban.backlog.loading_items }"
                >{{ kanban.backlog.content.length }}</span>
                <span
                    ng-if="! kanban.backlog.loading_items && ! kanban.backlog.fully_loaded"
                    class="count"
                >{{ kanban.backlog.nb_items_at_kanban_init }}</span>
            </div>
        </div>
    </div>

    <div ng-repeat="column in kanban.board.columns"
        class="column"
        ng-class="{
            'column-displayed': column.is_open,
            'column-hidden': ! column.is_open,
            'wip-reached': kanban.isColumnWipReached(column),
            'small_column': column.is_small_width
        }"
        ng-click="kanban.expandColumn(column)"
        ng-attr-title="{{ column.is_open ? '' : 'Toggle this column' | translate }}"
        ng-style="{width: column.resize_width}"
        data-column-id="{{ column.id }}"
    >
        <div class="column-header"
            ng-style="{width: column.resize_width}"
        >
            <span class="wip-limit"
                ng-class="{'infinity': !column.limit, 'editable': kanban.userIsAdmin()}"
            >
                <span ng-show="! column.limit">∞</span>
                <span ng-show="column.limit"><i class="icon-chevron-left"></i>{{ column.limit }}</span>
            </span>
            <wip-popover column="column" user-is-admin="kanban.userIsAdmin()" set-wip-limit="kanban.setWipLimitForColumn(column)"></wip-popover>
            <span
                ng-if="column.loading_items || column.fully_loaded"
                class="wip-count"
                ng-class="{ loading: column.loading_items }"
            >{{ column.content.length }}</span>
            <span
                ng-if="! column.loading_items && ! column.fully_loaded"
                class="wip-count"
            >{{ column.nb_items_at_kanban_init }}</span>
            <span class="toggle-column"
                title="{{ 'Toggle this column' | translate }}"
                ng-click="kanban.toggleColumn(column); $event.stopPropagation();"
            >
                <i ng-class="column.is_open ? 'icon-minus-sign-alt' : 'icon-plus-sign-alt'"></i>
            </span>
            <span class="warning-wip do-animate"
                ng-if="kanban.isColumnWipReached(column)"
                tooltip="{{ 'You have reached the work in progress limit for this column!' | translate }}"
                tooltip-trigger
                tooltip-animation="true"
                tooltip-placement="bottom"
                tooltip-append-to-body="true"
            >
                <i class="icon-warning-sign"></i>
            </span>
            <span class="column-label">{{ column.label }}</span>
        </div>
        <kanban-column
            ng-init="$ctrl.column=column"
        ></kanban-column>
        <add-in-place column="column" create-item="kanban.createItemInPlace" ng-if="column.user_can_add_in_place && column.is_open"></add-in-place>
        <div class="column-label">
            <div ng-style="{top: column.resize_top, left: column.resize_left}">
                {{ column.label }}
                <span
                    ng-if="column.loading_items || column.fully_loaded"
                    class="count"
                    ng-class="{ loading: column.loading_items }"
                >{{ column.content.length }}</span>
                <span
                    ng-if="! column.loading_items && ! column.fully_loaded"
                    class="count"
                >{{ column.nb_items_at_kanban_init }}</span>
            </div>
        </div>
    </div>

    <div class="archive column"
        ng-class="{'column-displayed': kanban.archive.is_open, 'column-hidden': ! kanban.archive.is_open, 'small_column': kanban.archive.is_small_width}"
        ng-click="kanban.expandArchive()"
        ng-attr-title="{{ kanban.archive.is_open ? '' : 'Toggle the archive' | translate }}"
        ng-style="{width: kanban.archive.resize_width}"
    >
        <div class="column-header"
            ng-style="{width: kanban.archive.resize_width}"
        >
            <span
                ng-if="kanban.archive.loading_items || kanban.archive.fully_loaded"
                class="wip-count"
                ng-class="{ loading: kanban.archive.loading_items }"
            >{{ kanban.archive.content.length }}</span>
            <span
                ng-if="! kanban.archive.loading_items && ! kanban.archive.fully_loaded"
                class="wip-count"
            >{{ kanban.archive.nb_items_at_kanban_init }}</span>
            <span class="toggle-column"
                title="{{ 'Toggle the archive' | translate }}"
                ng-click="kanban.toggleArchive(); $event.stopPropagation();"
            >
                <i class="icon-archive"></i>
            </span>
            <span class="column-label">{{ kanban.archive.label }}</span>
        </div>
        <kanban-column
            ng-init="$ctrl.column=kanban.archive"
        ></kanban-column>
        <div class="column-label">
            <div ng-style="{top: kanban.archive.resize_top, left: kanban.archive.resize_left}">
                {{ kanban.archive.label }}
                <span
                    ng-if="kanban.archive.loading_items || kanban.archive.fully_loaded"
                    class="count"
                    ng-class="{ loading: kanban.archive.loading_items }"
                >{{ kanban.archive.content.length }}</span>
                <span
                    ng-if="! kanban.archive.loading_items && ! kanban.archive.fully_loaded"
                    class="count"
                >{{ kanban.archive.nb_items_at_kanban_init }}</span>
            </div>
        </div>
    </div>
</div>
